<template>
	<view>
		<view class="start2">
			<view class="con">
				<!-- 			<view class="tip_text">
					<view class="txt1">请完善资料</view>
					 <view class="txt2">会让大家更想认识你！</view>
				</view> -->

				<button class="user_hd" v-if="!HeadImgUrl" hover-class="none" @click="iscro = true">
					<image :class="isHeadImgUrl?'redborder':''" class="icon"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713497774030384.png"
						mode="widthFix" />
					<image class="cimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17134979213041479.png" mode="widthFix"></image>
				</button>
				<button class="user_hd" v-else hover-class="none" @click="iscro = true">
					<image class="hd_img" :src="HeadImgUrl" mode="aspectFill" />
				</button>

				<view class="input_box" >
					<view class="titlebox">
						<text class="must">*</text>
						<text class="username">昵称</text>
					</view>
					
					<input :class="isName?'redborder':''" type="nickname" v-model="Name" placeholder-class="placename" placeholder="最多10个字" maxlength="10">
				</view>
				<!-- <view class="group" @click="showBirthday = true">
					<view class="lab">生日</view>
					<view class="inp_box">
						<input type="text" v-model="Birthday" disabled placeholder="选择生日" />
					</view>
					<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
				</view> -->
				<view class="input_box">
					<view class="titlebox">
						<text class="must">*</text>
						<text class="username">请选择性别(设置后不可更改)</text>
					</view>
					<view class="sexbox">
						<view class="sextitle" :class="{'tab4':sexnum == 0}" @click="checkSexChange(0)">
							<image class="seximg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713504752895497.png"></image>
							<text class="man" :class="{'text4':sexnum == 0}">男</text>
						</view>
						<view class="sextitle" :class="{'tab4':sexnum == 1}" @click="checkSexChange(1)">
							<image class="seximg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713504766833808.png"></image>
							<text class="man" :class="{'text4':sexnum == 1}">女</text>
						</view>
					</view>
					<!-- <radio-group v-model='Sex' @change="checkSexChange" class="checkbox-class">
						<label>
							<radio value="男" />男
							<radio class="item_e" value="女" />女
						</label>
					</radio-group> -->
				</view>
			</view>
		</view>

		<view class="start5">
			<view class="con">
				<view class="text1">
					<text class="must">*</text>
					<text class="text1">请上传1-3张滑雪照片</text>
				</view>
				<view class="imglistbox">
					<view class="imglist">
						<view class="item_box" v-for="(item,index) in images" :key="index">
							<image :src="item" mode="aspectFill" />
							<view class="del_con" @click="delImg(index)">
								<uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
							</view>
						</view>
						<view class="item_box" @click="selectImg" v-if="images.length <3">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17117084387991289.png" mode="aspectFill"/>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="start5">
			
			<view class="con">
				<!-- <view class="input_box" >
					<view class="titlebox">
						<text class="username">微信号(选填)</text>
					</view>
					
					<input  type="text" v-model="WechatNo" placeholder-class="placename" placeholder="请填写您的微信号" maxlength="30">
				</view> -->
				<!-- <block v-if="!is_have_pid">
					<view class="searbox">
						<view class="text1"> 推荐人（选填）</view>
						<view class="input_box">
							<input type="text" v-model="RecommendName" placeholder-class="placerec" disabled placeholder="请填写您的推荐人" @click="openSearchUserWin()">
						</view>
					</view>
					
				</block>
				<view class="text1"> 从哪知晓我们雪遇（选填）</view>
				<view class="in_box">
					<radio-group  class="checkbox-class">
						<view style="display: flex;" v-for="(item,index) in adChannelList" :key="index">
							<radio color="#0D0D0D"  :checked="item.id==radioValue"  @click="checkboxChange(item)" />
							<view class="name">{{item.name}}</view>
						</view>
					</radio-group>
				</view> -->
			</view>
		</view>
		<view class="btn3" @click="sub">
			进入雪遇
		</view>
		<!-- <view class="btn3" @click="nav_to('/pages/start/skitype')">
			下一步
		</view> -->
		<view style="height: 92rpx;"></view>					
		<!-- <view class="pre_step" @click="back_to()">返 回</view> -->
		<uni-popup ref="search_user" type="bottom">
			<view class="popupbox">
				<view class="title">
					搜索推荐人
				</view>
				<view class="sear">
					<input type="text" v-model="searVal" placeholder="昵称/手机号/ID号" @confirm="searchUser" />
					<view class="icon" @click="searchUser">
						<image src="@/static/img/search.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="scroll" scroll-y>
					<view v-if="Array.isArray(userArr) && userArr.length > 0">
						<view class="item" v-for="item in userArr" :key="item.ID" @click="selectUser(item)">
							<view class="cover">
								<image :src="item.HeadImgUrl" mode="aspectFill" />
							</view>
							<view class="name">
								{{item.Name || "匿名"}}
								<view class="member member_he" v-if="getUserType(item.UserType) == 1 ">黑金年卡</view>
								<view class="member member_he" v-if="getUserType(item.UserType) == 2 ">黑金卡</view>
								<view class="member number_huan" v-if="getUserType(item.UserType) == 3">金卡</view>
							</view>
						</view>
					</view>
					<view class="item" v-else
						style="height: 100%;display: flex;align-items: center;justify-content: center;">
						暂无该会员信息
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<u-datetime-picker immediateChange ref="datetimePicker" @cancel="showBirthday = false" :show="showBirthday"
			:minDate="minDate" :maxDate="maxDate" mode="date" v-model="nowDate"
			@confirm="setBirthday"></u-datetime-picker>
		<qfimagecropper
		:zIndex="99"
		v-if="iscro"
		:width="666"
		:height="666"
		@crop="cropView"
		></qfimagecropper>
	</view>
</template>

<script>
	import qfimagecropper from "@/pages/start/components/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue"
	export default {
		components:{
			qfimagecropper
		},
		data() {
			let d = new Date('1923/1/1');
			let nowD = new Date().getTime();
			return {
				iscro:false,
				isHeadImgUrl:false,
				isName:false,
				Birthday:'',
				minDate: d.getTime(),
				maxDate: nowD,
				nowDate: nowD,
				showBirthday: false,
				sexnum:0,
				radioValue:null,
				HeadImgUrl: '',
				Name: '',
				WechatNo:'',
				Sex:'男',
				comData: {
					Content: "",
					Images: "",
					CompanyID: 6002,
					CatalogID: 0,
					Title: "",
					IsVideo: 0
				},
				localList: [],
				images: [],
				City: '',
				Province: '',
				PID: 0,
				RecommendName: '',
				AdChannel: '',

				searVal: '',
				userArr: [],
				is_have_pid: false,

				checkedList: [],
				adChannelList: [{
						id: '1',
						name: '微信'
					},
					{
						id: '2',
						name: '抖音'
					},
					{
						id: '3',
						name: '小红书'
					},
					{
						id: '4',
						name: '其他'
					}
				]
			};
		},
		async onLoad() {
			let res = await this.$api.post('/Common/Add_ViewPath', {
				Path: 'start2',
				Platform: uni.getStorageSync('platform')
			});

			this.PID = uni.getStorageSync('user').PID;

			console.log('PID===' + this.PID);

			if (this.PID > 0) {
				this.is_have_pid = true;
			}

			await this.getCity();
				uni.$on('iscro', async data => {
				this.iscro = data
			})

		},
		onUnload() {
			uni.$off("iscro");
		},
		watch:{
			Name(){
				this.isName = false
			},
			HeadImgUrl(){
				this.isHeadImgUrl =false
			}
			
		},
		methods: {
			async setBirthday(e) {
				console.log(e.value);
				this.Birthday = await uni.$u.date(e.value, 'yyyy-mm-dd');
				this.showBirthday = false;
			},
			checkboxChange(item){
				if(this.radioValue == item.id){
					this.radioValue = null
				}else{
					this.radioValue = item.id
				}
				
			},
			checkSexChange(i){
				this.sexnum = i;
				console.log(this.sexnum);
				if(i == 0){
					this.Sex = '男';
				}else{
					this.Sex = '女';
				}
				
			},
			openSearchUserWin() {
				this.$refs.search_user.open()
			},
			async searchUser() {

				let user_res = await this.$api.post('/Member/Search', {
					Name: this.searVal
				});

				this.userArr = user_res.data;
			},
			selectUser(item) {

				this.PID = item.ID;
				this.RecommendName = item.Name;

				this.$refs.search_user.close()
			},
			delImg(index) {

				this.images.splice(index, 1);
			},

			getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res);
						},
						fail: function(err) {
							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				});
			},

			async getCity() {
				let loc = await this.getLocationSysc();
				let longitude = loc.longitude;
				this.longitude = loc.longitude;
				let latitude = loc.latitude;
				this.latitude = loc.latitude;
				let o = {
					longitude,
					latitude
				};
				let res = await this.$util.getAddress(o);

				this.Province = res.result.address_component.province;
				this.City = res.result.address_component.city;

			},

			async sub() {

				if (!this.HeadImgUrl) {
					this.isHeadImgUrl =true
					this.$pv.msg('请上传头像');
					return;
				}

				if (!this.Name) {
					this.isName = true
					this.$pv.msg('请输入昵称');
					return;
				}
				// if(!this.WechatNo){
				// 	this.$pv.msg('请输入微信号');
				// 	return;
				// }
				if (!this.Sex) {
					this.$pv.msg('请选择性别');
					return;
				}

				if (this.localList.length == 0) {
					this.$pv.msg('您还未上传1~3滑雪照片!');
					return;
				}

				// let res = await this.$api.post('/Member/Create', {
					let utfname = this.$util.utf16ToEntities(this.Name) 
					const data = {
					Sex: this.Sex,
					Province: this.Province,
					City: this.City,
					VideoUrl: '',
					IsVideo: 0,
					HeadImgUrl: this.HeadImgUrl,
					UserImgs: this.HeadImgUrl,
					Descript: '',
					Phone: '',
					IDCard: '',
					TrueName: '',
					Name: utfname,
					WechatNo: this.WechatNo,
					Height: 0,
					Weight: 0,
					Income: 0,
					IsMemberShow: 1,
					PID: this.PID,
					AdChannel: this.AdChannel,
					Birthday:this.Birthday,
					localList:this.localList,
					Flag:[]
				}
				this.$store.commit('setSign', data);
				// this.nav_to('/pages/start/skitype')
				// return
				let res = await this.$api.post('/Member/CreateV2',data );
				if(res.code != 0){
					this.$pv.msg('注册失败');
					return
				}
				uni.setStorageSync('xj_token', res.data.Token);
				
				let user = res.data.UserData;
				
				uni.setStorageSync('user', user);
				this.$store.commit('setUser', user);
				uni.switchTab({
					url: '/pages/tab/assistant'
				});
				//自动发布一条动态
				this.comData.Images = JSON.stringify(this.localList.map(item => {
					return item.netPath
				}))

				this.comData.Content = '';
				await this.$api.post('Community/UserShare', this.comData);
				this.$im.updateUserAvatarUrl(this.HeadImgUrl);
				this.$im.updateUserName(this.Name);
				
			},
			async cropView(e) {
				//   console.log(e, "eeeeeeeeeeee");
					let _this = this;
				let o = {
					ID: "",
					duration: 0,
					fileType: "image",
					tempUrl: e.tempFilePath,
					flieUrl: e.tempFilePath,
					tempKey: uni.$u.guid(8),
					pro: 0,
					netPath: "",
				};

				let r = await _this.uploadingList(
					o.flieUrl,
					o.tempKey,
					new Date().getTime() - 500
				);
				_this.HeadImgUrl = r;
				_this.isHeader = true;
			},
			async chooseavatar(e) {
				try {

					let _this = this;
					uni.chooseImage({
						count: 1, //默认9
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'], //从相册选择
						success: async function(res) {

							let o = {
								ID: "",
								duration: 0,
								fileType: 'image',
								tempUrl: res.tempFiles[0].path,
								flieUrl: res.tempFiles[0].path,
								tempKey: uni.$u.guid(8),
								pro: 0,
								netPath: "",
							};

							let r = await _this.uploadingList(o.flieUrl, o.tempKey,
								new Date().getTime() - 500);
							_this.HeadImgUrl = r;
							_this.isHeader = true;
						}
					})
				} catch (error) {
					this.$pv.msg('图片上传失败');
					console.log(error);
				}
			},

			selectImg(index) {
				let ind = index >= 0 ? index : -1;
				let _this = this;
				let con;
				let mediaType = ['image'];

				con = 3 - this.images.length;

				uni.chooseImage({
					count: con,
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'back',
					success(res) {

						res.tempFiles.forEach(async (item, index) => {
							let o;

							o = {
								ID: "",
								duration: 0,
								fileType: 'image',
								tempUrl: item.path,
								flieUrl: item.path,
								tempKey: uni.$u.guid(8),
								pro: 0,
								netPath: "",
							};

							if (ind == -1) {
								_this.localList.push(o);
							} else {
								_this.localList.splice(ind, 1, o);
							}
							setTimeout(async () => {
								let r = await _this.uploadingList(o.flieUrl, o.tempKey,
									new Date().getTime() - index * 500);
								console.log(r)
								_this.images.push(r);

							}, index * 150)

						});
					}
				});

			},

			async uploadingList(url, tempKey, timeStamp) {
				this.$pv.load('正在上传');
				const r = await this.$upload(url, pro => {
					this.localList.forEach((item) => {
						if (item.tempKey == tempKey) {
							item.pro = pro;
						}
					});
				})
				this.localList.forEach(item => {
					if (item.tempKey == tempKey) {
						item.netPath = r;
					}
				});
				this.$pv.closeLoad('')
				this.iscro = false
				return r;
			},

		},
		computed: {
			getUserType(l) {
				return l => {
					if (l.indexOf('黑金年') != -1) {
						return 1
					} else if (l.indexOf('黑金') != -1) {
						return 2
					} else if (l.indexOf('金') != -1) {
						return 3
					} else {
						return 0
					}
				}
			},
			checkedValue() {
				if (this.checkedList.length > 0) {
					const selectedItem = this.adChannelList.find((item) => item.id === this.checkedList[0]);

					if (selectedItem) {
						return `当前选中项为：${selectedItem.name}`;
					} else {
						return '';
					}
				} else {
					return '';
				}
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}
	.group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
		margin: 30rpx 0 ;
		&::after {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: 2rpx;
			content: '';
			transform: scaleY(.6);
			background-color: #E4E4E4;
		}

		.inp_box {
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: row;

			input {
				width: 100%;
				text-align: right;
				color: #999999;
				font-size: 32rpx;
			}
			.radio_s{
				display: flex !important;
				height:100rpx;
			}
			.item_check {
				padding: 10rpx;
				display: flex;
				flex-direction: row;
				
				.desc{
					color:#000 !important;
				}
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}

		.inp_append {
			margin-left: 8rpx;
		}

		.s_btn {
			color: #fff;
			    font-size: 24rpx;
			    width: 170rpx !important;
			    height: 60rpx !important;
			    border-radius: 5rpx;
			    background-color: #0D0D0D;
			    margin: 0 0 0 20rpx;
		}

	}
	.uni-popup{
		z-index: 9999 !important;
	}
	button::after {
		border-radius: 0 !important;
		border: 0 !important;
	}
	.tab4{
		background-color: #0D0D0D !important;
	}
	.text4{
		color: #fff !important;
	}
	.placerec{
		color: #999999;
		font-size: 32rpx;
		// text-align: right;
	}
	.placename{
		color: #999999;
		font-size: 32rpx;
		font-weight: 500;
		// text-align: right;
	}
	.must{
		font-size: 32rpx;
		color: #EF4034;
	}
	.titlebox{
			display: flex;
			align-items: center;
			.must{
				font-size: 32rpx;
				color: #EF4034;
			}
			.username{
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 10rpx;
			}
		}
	.con {
		width: 600rpx;
	}

	.des {
		margin-top: 20rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.start2 {
		// height: 400rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pre_step {
		width: 100%;
		text-align: center;
		line-height: 120rpx;
		color: #767676;
	}

	.btn3 {
			margin:  0 auto;
			margin-top: 64rpx;
			width: 670rpx;
			height: 92rpx;
			background: #0D0D0D;
			display: flex;
			border-radius: 44rpx;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	.start5 {
		margin-top: 25rpx;
		display: flex;
		align-items: center;

		.con {
			width: 100%;
			box-sizing: border-box;
			padding-left: 80rpx;
			padding-right: 80rpx;
			.searbox{
				// display: flex;
				// border-bottom: 1rpx solid #999999;
				align-items: center;
			}
		}

		.text1 {
			font-size: 28rpx;
			color: #999999;
			padding-top: 10rpx;
			padding-bottom: 20rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
		}


		.imglistbox {
			width: 590rpx;
			border-radius: 16rpx;
			box-sizing: border-box;

			.imglist {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 542rpx;
				flex-wrap: wrap;

				&::after {
					content: "";
					height: 1px;
					width: 33%;
					display: flex;
				}
			}

			.item_box {
				position: relative;
				background-color: #e2e2e2;
				height: 172rpx;
				width: 172rpx;
			}

			image {
				width: 172rpx;
				height: 172rpx;
				// background: #0f0;
			}
		}

		.pre_step {
			width: 100%;
			text-align: center;
			line-height: 120rpx;
			color: #767676;
		}

		.btn1 {
			margin-top: 64rpx;
			width: 590rpx;
			height: 96rpx;
			background: linear-gradient(225deg, #e2e2e2 0%, #b8b8b8 100%);
			box-shadow: 0px 8px 20px 0px rgba(46, 46, 46, 0.4);
			display: flex;
			border-radius: 12rpx;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 36rpx;
		}

		.text3 {
			margin-top: 48rpx;
			color: #9d9d9d;
			font-size: 40rpx;
			line-height: 56rpx;
		}

		.video_box {
			position: relative;
			margin-top: 38rpx;
			;
			width: 590rpx;
			height: 360rpx;

			video {
				width: 590rpx;
				height: 360rpx;
			}
		}


		.del_con {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 50;
			background: rgba(0, 0, 0, 0.4);
			height: 40rpx;
			width: 40rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 0 16rpx 0 16rpx;
		}
	}

	.tip_text {
		position: relative;
		height: 160rpx;

		.txt1 {
			height: 80rpx;
			font-size: 64rpx;
			color: #0a0a0a;
		}

		.txt2 {
			position: absolute;
			width: 700rpx;
			height: 80rpx;
			font-size: 64rpx;
			color: #0a0a0a;
		}
	}

	.user_hd {
		margin-top: 28rpx;
		margin-left: auto;
		margin-right: auto;
		width: 200rpx;
		height: 200rpx;
		background: #f6f6f6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: visible !important;
		.redborder{
			border: 1rpx solid red;
			    border-radius: 50%;
		}
		.icon {
			height: 200rpx;
			width: 200rpx;
		}
		.cimg{
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					right: 10rpx;
					bottom: 0;
				}
		.hd_img {
			height: 100%;
			width: 100%;
			border-radius: 50%;
		}
	}

	.input_box {
		margin-bottom: 20rpx;
		.redborder{
			border: 1rpx solid red;
		}
		.sexbox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.sextitle{
				width: 292rpx;
				height: 96rpx;
				background-color: #f6f6f6;
				text-align: center;
				line-height: 96rpx;
				border-radius: 16rpx;
				.seximg{
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					margin-right: 8rpx;
				}
				.man{
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
		input {
			height: 80rpx;
			line-height: 80rpx;
			color: #000;
			// text-align: right;
			border: 1rpx solid #E4E4E4;
			box-sizing: border-box;
			padding: 0 36rpx;
		}
		
		.checkbox-class{
			height: 80rpx;
			line-height: 80rpx;
			color: #333333;
			.item_e{
				margin-left:32rpx;
			}
		}
		
		checkbox{
			height: 70rpx;
			line-height: 70rpx;
			color: #000;
		}

		.input-placeholder,
		.textarea-placeholder {
			color: #999;
		}
	}
	
	.in_box {
		margin-top: 5rpx;
		//height: 80rpx;
		//line-height: 80rpx;
		//text-align: center;
	
		input {
			height: 70rpx;
			line-height: 70rpx;
			color: #000;
		}
		
		.checkbox-class{
			// height: 210rpx;
			line-height: 60rpx;
			color: #000;
			display: flex;
			justify-content: space-between;
			.name{
				font-size: 28rpx;
			}
		}
		
		checkbox{
			height: 70rpx;
			line-height: 70rpx;
			color: #000;
		}
	
		.input-placeholder,
		.textarea-placeholder {
			color: #999;
		}
	}

	.btn1 {
		margin-top: 54rpx;
		width: 590rpx;
		height: 100rpx;
		background: linear-gradient(225deg, #020202 0%, #363636 100%);
		box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
		border-radius: 12rpx;
		opacity: 0.9;
		color: #fff;
		font-size: 36rpx;
		line-height: 100rpx;
	}

	.btn2 {
		line-height: 100rpx;
		margin-top: 32rpx;
		width: 590rpx;
		height: 100rpx;
		box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
		border-radius: 12rpx;
		border: 1px solid #0a0a0a;
		background: #fff;
		box-sizing: border-box;
	}

	.popupbox {
		background-color: #fff;
		border-top-left-radius: 26rpx;
		border-top-right-radius: 26rpx;
		padding: 20rpx 32rpx;
		padding-bottom: 70rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
			color: #6f6f6f;
		}

		.sear {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 8rpx #ccc;

			.icon {
				padding: 10rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			input {
				color: #6f6f6f;
				padding: 10rpx 10rpx 10rpx 20rpx;
				flex: 1;
			}
		}

		.scroll {
			width: 100%;
			height: 30vh;
			box-sizing: border-box;

			.item {
				display: flex;
				padding: 20rpx 0;
				height: 100rpx;

				border-bottom: 2rpx solid #eee;

				.cover {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 1px solid #333;

					image {

						height: 100%;
						width: 100%;
					}
				}

				.name {
					color: #6f6f6f;
					line-height: 52px;
					height: 52rpx;
					padding: 0rpx 0 0 20rpx;

					.member {
						display: inline-block;
						width: 68rpx;
						height: 32rpx;
						background: linear-gradient(135deg, #7E7E7E 0%, #292929 100%);
						border-radius: 2px;
						border: 2px solid #D6C6AB;
						text-align: center;
						color: #fff;
						font-size: 16rpx;
						line-height: 32rpx;
						margin-left: 20rpx;
					}

					.number_huan {
						color: #4C310C;
						background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
						border: 2rpx solid #E6CEB5;
					}
				}

			}

			.item:last-child {
				border: 0;
			}

			.item:first-child {
				padding-top: 0;
			}
		}
	}
</style>